<template>
  <cardBlock>
    <template #default>
      <a-form auto-label-width="100px" :model="form" @submit="handleSubmit">
        <a-form-item field="username" tooltip="请输入用户名" label="用户名">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-item>

        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="请输入密码" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit">提交</a-button>
          <a-button class="changeBoxLogin" @click="onChange">切换注册</a-button>
        </a-form-item>
      </a-form>
    </template>
  </cardBlock>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import cardBlock from "@/components/common/card-block/index.vue";
import { login } from "@/apis/oldman/index";
import router from "@/router/route";
import { Message } from "@arco-design/web-vue";

// import { Message } from "@arco-design/web-vue";
// import router from "@/router/route";
const props = defineProps<{ setLogin: (val: boolean) => void }>();
function onChange() {
  props.setLogin(false);
}

const form = reactive({
  username: "",
  password: "",
});
const handleSubmit = async () => {
  const r = await login({
    username: form.username,
    password: form.password,
  });
  const res = r.data;
  console.log("resData", res);

  if (res.code === 200) {
    if (res.data.token) {
      localStorage.setItem("jwtToken", res.data.token);
      localStorage.setItem("userInfo", JSON.stringify(res.data.user));
      Message.success("登录成功");
      router.push("/oldman/health");
    } else {
      Message.error("数据获取失败，服务端未正确响应");
    }
  } else {
    // Message.error("登录失败");

    // console.log(res, "res");
    Message.error(res.message);
  }
};
</script>

<style>
.changeBoxLogin {
  margin-left: 20px;
}
</style>
